<template>
  <nut-swipe class="swipe " v-if="!isDelete">
    <nut-row type="flex" align="center" justify="center" class="row">
      <nut-col :span="6">
        <img src="https://picsum.photos/200"  alt="随机壁纸" class="img"/>
      </nut-col>
      <nut-col :span="18">
        <div>{{ text }}</div>
        <div>{{ author }}</div>
      </nut-col>
    </nut-row>
    <template #right>
      <nut-button shape="square" style="height:100%" type="danger" @click="del">删除</nut-button>
    </template>
  </nut-swipe>
</template>

<script>
import {onMounted, ref} from "vue";
import { getCommemt } from "@/http/api";

export default {
  name: 'Comment',
  props: {
    msg: String
  },
  setup(){
    const text = ref("")
    const author = ref("")
    const isDelete = ref(false)
    onMounted(() => {
      getCommemt().then(res=>{
        console.log(res)
        text.value = res.result.name
        author.value = res.result.from
      })
    })
    function del(){
      isDelete.value = true
    }
    return {
      text,
      author,
      isDelete,
      del
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.row{
  padding: 20px;
  height: 80px;
  .img{
    height: 80px;
  }
}
.swipe{
  background-color: white;
}
</style>
